<template>
	<view class="main-page">
		
		<view class="header-box">
			<view class="search-box" >
				<view class="input-box">
					<view class="row-container width-100p">
						<image class="wh-30 mr-20" src="../../static/common/ic_search.png"
						style="flex-shrink: 0;"></image>
						<input 
							class="font-333-28 width-100p"
							placeholder-class="font-999-28"
							placeholder="请输入客户名称或电话"
							v-model="keyword"
							@input="handleInputKeyword"
						/>
					</view>
					<image class="wh-34 ml-20" src="../../static/common/ic_clear.png" v-show="keyword"
					 @click="clearInput" style="flex-shrink: 0;"></image>
				</view>
				<view class="add-box" @click="gotoAddCustomer">
					<image class="wh-30 mr-10" src="../../static/common/ic_add.png"></image>
					<text class="font-fff-26">添加客户</text>
				</view>
			</view>
			<view class="sort-box">
				<view :class="[sortIndex == 0 ? 'sort-item-chosen' : 'sort-item']" @click="changeSort(0)">
					<text :class="[sortIndex == 0 ? 'font-fff-28' : 'font-666-28']">全部</text>
					<image class="sort-arrow" v-if="sortIndex == 0 && orderType == 0"
					src="../../static/common/ic_sort_arrow_up.png"></image>
					<image class="sort-arrow" v-else-if="sortIndex == 0 && orderType == 1"
					src="../../static/common/ic_sort_arrow_down.png"></image>
					<image class="sort-arrow" v-else
					src="../../static/common/ic_sort_arrow_default.png"></image>
				</view>
				<view :class="[sortIndex == 1 ? 'sort-item-chosen' : 'sort-item']" @click="changeSort(1)">
					<text :class="[sortIndex == 1 ? 'font-fff-28' : 'font-666-28']">到店</text>
					<image class="sort-arrow" v-if="sortIndex == 1 && orderType == 0"
					src="../../static/common/ic_sort_arrow_up.png"></image>
					<image class="sort-arrow" v-else-if="sortIndex == 1 && orderType == 1"
					src="../../static/common/ic_sort_arrow_down.png"></image>
					<image class="sort-arrow" v-else
					src="../../static/common/ic_sort_arrow_default.png"></image>
				</view>
				<view :class="[sortIndex == 2 ? 'sort-item-chosen' : 'sort-item']" @click="changeSort(2)">
					<text :class="[sortIndex == 2 ? 'font-fff-28' : 'font-666-28']">星级</text>
				</view>
				<view :class="[sortIndex == 3 ? 'sort-item-chosen' : 'sort-item']" @click="changeSort(3)">
					<text :class="[sortIndex == 3 ? 'font-fff-28' : 'font-666-28']">备注</text>
				</view>
				<view :class="[sortIndex == 4 ? 'sort-item-chosen' : 'sort-item']" @click="changeSort(4)">
					<text :class="[sortIndex == 4 ? 'font-fff-28' : 'font-666-28']">核销</text>
				</view>
			</view>
		</view>
		<view class="column-container mt-220 width-100p" v-if="clientList.length > 0">
			<view class="list-item" v-for="(item , index) in clientList" :key="index">
				<view class="row-container-row-between width-100p">
					<view class="row-container" @click="changeStar(item)">
						<image v-if="item.checkStar == 1" class="star" 
						src="../../static/common/ic_star_red.png"></image>
						<image v-else class="star"
						src="../../static/common/ic_star_grey.png"></image>
						<text class="font-333-26" v-if="item.lastShopTime">
							上次到店时间：{{item.lastShopTime}}</text>
						<text class="font-333-26" v-else>暂无到店记录</text>
					</view>
					<view class="row-container" @click="gotoEdit(item)" style="flex-shrink: 0;">
						<image class="wh-26 mr-10" src="../../static/common/ic_edit.png"></image>
						<text class="font-666-26">编辑</text>
					</view>
				</view>
				<view class="row-container mt-20">
					<image class="client-avatar" src="../../static/common/ic_avatar_female.png" v-if="item.sex == 0"></image>
					<image class="client-avatar" src="../../static/common/ic_avatar_male.png" v-if="item.sex == 1"></image>
					<view class="column-container">
						<view class="row-container">
							<text class="font-333-32 font-weight-600">{{item.realName}}</text>
							<view class="row-container-center green-birthday" v-if="item.balanceBrithdayDay > 0 && item.balanceBrithdayDay <= 7">
								<image class="wh-22 mr-6" src="../../static/common/ic_cake_green.png"></image>
								<text class="font-1dc-22 font-weight-600">还有{{item.balanceBrithdayDay}}天生日</text>
							</view>
							<view class="row-container-center red-birthday" v-if="item.balanceBrithdayDay == 0">
								<image class="wh-22 mr-6" src="../../static/common/ic_cake_red.png"></image>
								<text class="font-ff6939-22 font-weight-600">今天生日</text>
							</view>
						</view>
						<view class="row-container mt-4">
							<text class="font-999-26">编号：{{item.id}}</text>
							<view class="column-line"></view>
							<text class="font-999-26" v-if="item.sex == 1">男</text>
							<text class="font-999-26" v-if="item.sex == 0">女</text>
							<view class="column-line"></view>
							<text class="font-999-26">电话：{{item.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="source-box" v-if="item.brithdayTime || item.channelMsg ">
					<text class="font-999-22" v-if="item.channelMsg">来源：{{item.channelMsg}}</text>
					<view class="column-line" v-if="item.channelMsg"></view>
					<text class="font-999-22" v-if="item.brithdayTime">生日：{{item.brithdayTime}}</text>
				</view>
				
				<view class="row-container-row-between width-100p mt-20">
					<view class="single-enter" @click="gotoRecord(item)">
						<image class="wh-34 mb-12" src="../../static/common/ic_appoint_record.png"></image>
						<text class="font-666-24">预约({{item.yyCount}})</text>
					</view>
					<view class="single-enter" @click="gotoServiceList(item)">
						<image class="wh-34 mb-12" src="../../static/common/ic_check.png"></image>
						<text class="font-666-24">核销({{item.writeOffCount}})</text>
					</view>
					<view class="single-enter" @click="gotoRemarks(item)">
						<image class="wh-34 mb-12" src="../../static/common/ic_remark.png"></image>
						<text class="font-666-24">备注({{item.remarkCount}})</text>
					</view>
					<view class="single-enter" @click="handleCallCustomer(item)">
						<image class="wh-34 mb-12" src="../../static/common/ic_call_grey.png"></image>
						<text class="font-666-24">电话联系</text>
					</view>
					<view class="single-enter" style="background: #F94C4B;margin-right: 0rpx;"
					@click="gotoAppointment(item)">
						<image class="wh-34 mb-12" src="../../static/common/ic_add_appoint.png"></image>
						<text class="font-fff-24">添加预约</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="column-container-row-center width-100p" v-else>
			<image class="empty-ic" src="../../static/common/ic_no_client.png"></image>
			<text class="font-333-28">暂无记录，快去添加客户吧</text>
		</view>
		
	</view>
</template>

<script>
	import constant from '../../utils/constant.js'
	
	export default {
		data() {
			return {
				clientList:[],
				page:1,
				hasMoreData:false,
				keyword:'',
				orderType:0 , //排序方式  0正序  1倒序
				sortIndex:0 , //0为id 1为到店 2为星级 3备注 4核销
				canAddClient:false,
			}
		},
		
		onLoad() {
			this.loadDataList()
			let that = this
			uni.$on('refreshClientList' , ()=>{
				that.page = 1
				that.loadDataList()
			})
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadDataList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadDataList()
			}
		},
		
		methods: {
			//修改排序  sort 0id  1到店 2星级  3备注  4核销
			changeSort(sort){
				if (sort == 0 || sort == 1){  // id和到店 可排序
					if (this.sortIndex == sort){
						if (this.orderType == 0){
							this.orderType = 1
						} else if (this.orderType == 1){
							this.orderType = 0
						}
					} else{
						this.sortIndex = sort
						this.orderType = 0
					}
					this.page = 1
					this.loadDataList()
				} else{
					if (this.sortIndex != sort){
						this.sortIndex = sort
						this.orderType = 0
						this.page = 1
						this.loadDataList()
					}
					
				}
			},
			
			gotoEdit(item){
				if (!this.utils.checkAuthority(constant.auth_edit_custom)){
					return
				}
				uni.navigateTo({
					url:'/pages/client/editClient?customId=' + item.id
				})
			},
			
			gotoRecord(item){
				uni.navigateTo({
					url:'/pages/client/record?customId=' + item.id
				})
			},
			
			gotoRemarks(item){
				uni.navigateTo({
					url:'/pages/client/remarks?customId=' + item.id
				})
			},
			
			gotoAppointment(item){
				uni.$emit('chosenClient' , item)
				uni.switchTab({
					url:'/pages/appointment/index'
				})
			},
			
			gotoSearchClient(){
				uni.navigateTo({
					url:'/pages/client/searchClient'
				})
			},
			
			//添加客户
			gotoAddCustomer(){
				if (!this.utils.checkAuthority(constant.auth_add_custom)){
					return
				}
				
				uni.navigateTo({
					url:'/pages/client/addClient'
				})
			},
			
			gotoServiceList(item){
				uni.navigateTo({
					url:'/pages/client/serviceList?customId=' + item.id
				})
			},
			
			//输入关键字
			handleInputKeyword(e){
				this.keyword = e.detail.value
				this.page = 1
				this.loadDataList()
			},
			
			clearInput(){
				this.keyword = ""
				this.page = 1
				this.loadDataList()
			},
			
			loadDataList(){
				let that = this
				this.http({
					url:'/user/custom/findCustomList',
					method:'POST',
					data:{
						pageNo: that.page,
						pageSize: 20,
						keyWord:that.keyword,
						sortIndex:that.sortIndex,
						orderType:that.orderType
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.clientList = res.data
							} else{
								that.clientList = [...that.clientList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 20
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//修改是否为星标客户
			changeStar(item){
				let isStar = 1
				if (item.checkStar == 1){
					isStar = 0
				}
				
				let that = this
				this.http({
					url:'/user/custom/processStar',
					method:'POST',
					data:{
						checkStar:isStar,
						customId :item.id
					},
					success(res){
						if (res.code == 200){
							item.checkStar = isStar
						}
					},
					failed(e){
					}
				})
			},
			
			//联系客户
			handleCallCustomer(item){
				if (item.mobile){
					uni.makePhoneCall({
						phoneNumber:item.mobile
					})
				}
			}
		}
	}
</script>

<style lang="scss">
		
	.header-box{
		display: flex;
		flex-direction: column;
		width: 100%;
		position: fixed;
		top: 0rpx;
		
		.search-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 113rpx;
			background: white;
			
			.input-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				background: #F5F5F5;
				border-radius: 10rpx;
				flex-grow: 1;
				height: 70rpx;
				margin: 0rpx 30rpx;
				padding: 0rpx 20rpx;
				
			}
			
			.add-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 172rpx;
				height: 70rpx;
				background: #F94C4B;
				border-radius: 10rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}
		}
		
		.sort-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: calc(100% - 42rpx);
			height: 107rpx;
			padding: 0rpx 21rpx;
			background: #F5F5F5;
			
			.sort-arrow{
				width: 12rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
			
			.sort-item{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 67rpx;
				background: white;
				flex-grow: 1;
				border-radius: 16rpx;
				margin: 0rpx 9rpx;
			}
			
			.sort-item-chosen{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 67rpx;
				background: #F94C4B;
				flex-grow: 1;
				border-radius: 16rpx;
				margin: 0rpx 9rpx;
			}
		}
	}
	
	.list-item{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		margin: 0rpx 30rpx 20rpx 30rpx;
		padding: 24rpx;
		background: white;
		border-radius: 16rpx;
		
		.star{
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
		
		.client-avatar{
			width: 80rpx;
			height: 80rpx;
			margin-right: 24rpx;
		}
		
		.green-birthday{
			background: #1DCB8C1A;
			border: 1rpx solid #1DCB8C;
			padding: 3rpx 8rpx;
			margin-left: 8rpx;
			border-radius: 6rpx;
		}
		
		.red-birthday{
			background: #FF69391A;
			border: 1rpx solid #FF6939;
			padding: 3rpx 8rpx;
			margin-left: 8rpx;
			border-radius: 6rpx;
		}
		
		.source-box{
			background: #F7F7F7;
			border-radius: 4rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: calc(100% - 28rpx);
			padding: 6rpx 14rpx;
			margin-top: 8rpx;
		}
		
		.column-line{
			width: 1rpx;
			height: 16rpx;
			background: #999999;
			margin: 0rpx 16rpx;
		}
		
		.single-enter{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 116rpx;
			flex-grow: 1;
			margin-right: 12rpx;
			border-radius: 10rpx;
			border: 1rpx solid #E9E9E9
		}
		
		.grey-box{
			width: 150rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: 600;
		}
		
	}
	
	.empty-ic{
		width: 230rpx;
		height: 230rpx;
		margin-top: 298rpx;
		margin-bottom: 20rpx;
	}
	
	
</style>
